<template>
	<view class="container" :style="'background-color: '+info.bg_color">
		<view class="plan-text">
			<view class="plan-title">
				<text>{{info.planName}}</text>
			</view>
			<view class="plan-content">
				<text>计划时间：{{info.startTime}}</text>
				<text>{{info.planDescription}}</text>
			</view>
		</view>
		<view class="plan-button">
			<button @click="clickBtn" type="default" class="plan-btn" :class="info.isRemind?'remindPlan':''" >{{info.isRemind?'已提醒':'提醒'}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		props:['info','index'],
		mounted(){
		},
		methods:{
			clickBtn(){
				if(!this.info.isRemind) this.$emit('planClickBtn',{info:this.info,index:this.index})
				
			}
		}
	}
</script>

<style lang="scss">
	.container{
		width: 100%;
		display: flex;
		justify-content: space-between;
		background: rgba(215,250,250,0.85);
		border-radius: 18rpx;
		box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(28,97,189,0.12); 
		padding: 29rpx;
		.plan-title{
			text{
				font-size: 28rpx;
				font-weight: 700;
				color: #6d39e9;
			}
			flex:1;
		}
		.plan-content{
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(109,57,233,0.80);
			text{
				display: block;
				margin: 7rpx 0;
			}
		}
		.plan-button{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			width: 160rpx;
		}
		.plan-btn{
			width: 130rpx;
			height: 50rpx;
			line-height: 50rpx;
			background-color: #fff;
			color:#6D39E9;
			font-size: 24rpx;
			box-shadow:none;
			// padding: 8rpx 30rpx;
			border-radius:50rpx;
			font-size:22rpx;
		}
		.remindPlan{
			background: rgba(0,0,0,0.10);
			color: #fff;
			border: none;
		}
	}
</style>
